<html>
<title>自定义指令</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <h3 v-focus>{{ msg }}</h3>
        <br />
        <button @click="updateMsg">更新</button>
        <h3 v-world>Hello World</h3>
        <br />
        <input v-focus2 />
    </div>
    <script>
        Vue.directive('focus', {
            bind() {
                alert('只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置');
            },
            inserted() {
                alert('被绑定元素插入父节点时调用 ');
            },
            update() {
                alert('绑定的元素所在模板更新时使用 ');
            },
            componentUpdated() {
                alert('被绑定元素完成一次模板更新时使用 ');
            },
            unbind() {
                alert('只调用一次，指令与元素解绑时调用 ');
            }
        });
        Vue.directive('world', {
            bind(el, binding) {
                el.style.color = "red";
            }
        });
        var vm = new Vue({
            data: {
                msg: "自定义指令"
            },
            methods: {
                updateMsg() {
                    this.msg = "修改后的数据";
                }
            },
            directives: {
                focus2: {
                    // 指令的定义
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        }).$mount('.container');
    </script>

</body>

</html>